<template>
  <a-card>
    <!-- 搜索区域 -->
    <a-form
        :model="searchForm"
        layout="inline"
        @submit.prevent="onSearch"
        class="search-form"
    >
      <a-form-item
          v-for="field in searchConfig"
          :key="field.key"
          :label="field.label"
      >
        <component
            :is="getSearchComponent(field.type).name"
            v-model:value="searchForm[field.key]"
            v-bind="{ ...getSearchComponent(field.type).defaultProps, ...(field.props || {}) }"
        />
      </a-form-item>

      <a-form-item>
        <a-button type="primary" @click="onSearch">搜索</a-button>
        <a-button style="margin-left: 8px" @click="onReset">重置</a-button>
      </a-form-item>

      <!-- 功能按钮区域 -->
      <a-form-item style="margin-left: auto">
        <a-space>
          <a-button
              v-for="btn in actionButtons"
              :key="btn.key"
              type="primary"
              :danger="btn.danger"
              :ghost="btn.ghost"
              @click="() => onActionButtonClick(btn.key)"
          >
            {{ btn.label }}
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>

    <!-- 表格区域 -->
    <a-table
        :columns="columnsWithAction"
        :data-source="dataSource"
        :loading="loading"
        :pagination="paginationConfig"
        @change="onTableChange"
        rowKey="id"
        style="margin-top: 16px"
    />
  </a-card>
</template>

<script setup lang="jsx">
import {reactive, computed} from "vue";

const props = defineProps({
  // 搜索框配置 [{ key, label, type, props, defaultValue }]
  searchConfig: {type: Array, default: () => []},
  // 表格列配置
  columns: {type: Array, required: true},
  // 表格数据
  dataSource: {type: Array, default: () => []},
  // 加载状态
  loading: {type: Boolean, default: false},
  // 表格操作按钮
  actions: {type: Array, default: () => []},
  // 顶部功能按钮区域配置 [{ key, label, danger, ghost }]
  actionButtons: {
    type: Array, default: () => []
  },
  // 分页配置
  pagination: {
    type: Object,
    default: () => ({current: 1, pageSize: 10, total: 0}),
  },
  // 是否启用分页
  paginationEnable: {type: Boolean, default: true},
});

const emit = defineEmits(["search", "action", "change", "button-click"]);

// 初始化搜索表单
const searchForm = reactive({});
props.searchConfig.forEach((f) => {
  searchForm[f.key] = f.defaultValue ?? null;
});

// 渲染操作列
const actionColumn = {
  title: "操作",
  key: "actions",
  fixed: "right",
  width: 150,
  customRender: ({record}) => (
      <a-space>
        {props.actions.map((action) => (
            <a
                key={action.text}
                onClick={() => emit("action", {action: action.key || action.text, record})}
                style="cursor: pointer;word-break: keep-all;"
            >
              {action.text}
            </a>
        ))}
      </a-space>
  ),
};

// 合并操作列
const columnsWithAction = computed(() => {
  return props.actions.length > 0
      ? [...props.columns, actionColumn]
      : props.columns;
});

// 分页配置
const paginationConfig = computed(() => {
  if (!props.paginationEnable) return false;
  return {
    current: props.pagination.current,
    pageSize: props.pagination.pageSize,
    total: props.pagination.total,
    showSizeChanger: true,
    showTotal: (total) => `共 ${total} 条`,
  };
});

// 组件选择
function getSearchComponent(type) {
  switch (type) {
    case "select":
      return {
        name: "a-select",
        defaultProps: {
          style: {width: "160px"},
          allowClear: true,
          placeholder: "请选择",
        },
      };
    case "date":
      return {
        name: "a-date-picker",
        defaultProps: {
          style: {width: "160px"},
        },
      };
    default:
      return {
        name: "a-input",
        defaultProps: {
          style: {width: "160px"},
          allowClear: true,
          placeholder: "请输入",
        },
      };
  }
}

// 搜索
function onSearch() {
  emit("search", {...searchForm});
}

// 重置
function onReset() {
  Object.keys(searchForm).forEach((key) => (searchForm[key] = null));
  emit("search", {...searchForm});
}

// 功能按钮点击
function onActionButtonClick(key) {
  emit("button-click", key);
}

// 表格分页、过滤、排序变化
function onTableChange(pagination, filters, sorter) {
  emit("change", {pagination, filters, sorter});
}
</script>

<style scoped>
.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
</style>
